<template>
  <div class="setting-drawer">
    <a-drawer
      width="300"
      placement="right"
      @close="onClose"
      :closable="false"
      :mask="false"
      :visible="visible"
      :wrap-style="{ position: 'absolute' }"
      :get-container="false"
      :bodyStyle="{ padding: '8px 16px' }"
    >
      <div id="setting-basemapGalleryDiv"></div>
      <a-collapse default-active-key="1" :bordered="false" expand-icon-position="right">
        <a-collapse-panel key="1" header="系统图层">
          <a-list :data-source="basemap_list" :grid="{ gutter: 16, column: 3 }" :style="{ margin: '8px 16px 0 16px' }">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card :bodyStyle="{ padding: 0, overflow: 'hidden' }" @click="changeBasemap(item)">
                <a><img :src="item.img" /></a>
              </a-card>
            </a-list-item>
          </a-list>
          <a-form-model>
            <a-form-model-item label="分屏比对" labelAlign="left" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
              <a-checkbox @change="onSwipe"> 开启 </a-checkbox>
            </a-form-model-item>
            <a-form-model-item label="省级服务" labelAlign="left" :label-col="{ span: 6 }" :wrapper-col="{ span: 24 }">
              <a-tabs default-active-key="1" tab-position="left" size="small">
                <a-tab-pane key="1" tab="2024">
                  <a-list :data-source="layers_data" :style="{ margin: '0 0 5px' }">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <a-checkbox @change="onChange">
                        {{ item.title }}
                      </a-checkbox>
                    </a-list-item>
                  </a-list>
                </a-tab-pane>
                <a-tab-pane key="2" tab="2023">
                  <a-list :data-source="layers_data" :style="{ margin: '0 0 5px' }">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <a-checkbox @change="onChange">
                        {{ item.title }}
                      </a-checkbox>
                    </a-list-item>
                  </a-list>
                </a-tab-pane>
                <a-tab-pane key="3" tab="2022">
                  <a-list :data-source="layers_data" :style="{ margin: '0 0 5px' }">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <a-checkbox @change="onChange">
                        {{ item.title }}
                      </a-checkbox>
                    </a-list-item>
                  </a-list>
                </a-tab-pane>
              </a-tabs>
            </a-form-model-item>
          </a-form-model>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="自定义图层">
          <a-button type="primary" icon="plus" block @click="handleAddMap"> 添加底图</a-button>
          <a-list :data-source="layers_data" :style="{ marginTop: '16px' }">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-checkbox @change="(e) => ChangeCustomizeLayer(item, e)">
                {{ item.title }}
              </a-checkbox>
            </a-list-item>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
    </a-drawer>
    <div class="setting-drawer-index-handle" @click="toggle" slot="handle" :class="{ 'draw-close': visible }">
      <a-icon type="double-left" v-if="!visible" />
      <a-icon type="double-right" v-else />
      <span>图层服务</span>
    </div>
    <new-base-map ref="newbase"></new-base-map>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader'
import NewBaseMap from '@views/components/NewBaseMap.vue'
const options = {
  url: 'https://js.arcgis.com/3.34/',
  dojoConfig: {
    async: true,
    packages: [
      {
        location: '/modules',
        name: 'modules'
      }
    ]
  }
}
export default {
  components: { NewBaseMap },
  props: {
    map: {
      type: Object,
      require: true,
      default: () => ({})
    },
    basemapGallery: {
      type: Object,
      require: true,
      default: () => ({})
    }
  },
  data() {
    return {
      mapModules: { WebTiledLayer: null },
      srcRefNode: null,
      text: `A dog is a type of domesticated animal. Known for its loyalty and faithfulnessrld.`,
      activeKey: ['1'],
      expandIconPosition: 'left',
      systems_list: [],
      basemap_list: [
        { img: '/static/image/maptype_img.png', id: 'image' },
        { img: '/static/image/maptype_vec.png', id: 'vector' }
      ],
      layers_data: [
        {
          title: '5月份影像',
          url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer',
          id: 'dy_1',
          content: 'Racing car spray.'
        },
        {
          title: '6月份影像_墨卡托',
          url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/info/iteminfo',
          id: 'dy_4',
          content: 'Racing car spray.'
        },
        {
          title: '7月份影像',
          id: 'dy_2',
          url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer',
          content: 'Japanese prince.'
        },
        {
          title: '9月份影像',
          id: 'dy_3',
          url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer',
          content: 'Japanese princ.'
        }
      ],
      visible: false
    }
  },

  watch: {
    // map(newVal) {
    //   console.log(newVal)
    //   this.startup()
    // },
    // basemapGallery(newVal) {
    //   if (this.basemapGallery) {
    //     console.log('basemapGallery', this.basemapGallery)
    //     // dojo.place(this.basemapGallery, )
    //   }
    // }
  },
  mounted() {
    this.startup()
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
    toggle() {
      this.visible = !this.visible
    },
    onMultiTab(checked) {
      this.$store.dispatch('ToggleMultiTab', checked)
    },
    onChange(e) {
      console.log(`checked = ${e.target.checked}`)
    },
    handleAddMap() {
      this.$refs.newbase.show()
    },
    ChangeCustomizeLayer(item, evt) {
      var checked = evt.target.checked
      loadModules(['esri/layers/ArcGISDynamicMapServiceLayer', 'dojo/domReady!'], options)
        .then(([ArcGISDynamicMapServiceLayer]) => {
          if (checked) {
            var testlyr = new ArcGISDynamicMapServiceLayer(item.url, { id: item.id })
            this.map.addLayer(testlyr)
          } else {
            var layer = this.map.getLayer(item.id)
            this.map.removeLayer(layer)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    changeBasemap(item) {
      this.basemapGallery.select(item.id)
    },
    startup() {
      loadModules(
        [
          'esri/layers/WebTiledLayer',
          'esri/layers/ArcGISDynamicMapServiceLayer',
          'esri/dijit/Basemap',
          'esri/dijit/BasemapLayer',
          'esri/dijit/BasemapGallery',
          'esri/dijit/LayerSwipe',
          'dojo/domReady!'
        ],
        options
      )
        .then(([WebTiledLayer, ArcGISDynamicMapServiceLayer, Basemap, BasemapLayer, BasemapGallery, LayerSwipe]) => {
          // var url = 'https://services.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer'
          // var testlyr = new ArcGISTiledMapServiceLayer(url)
          // this.map.addLayer(testlyr)

          // TODO https://developers.arcgis.com/javascript/3/jssamples/#search/LayerSwipe
          // readme https://developers.arcgis.com/javascript/3/jsapi/layerswipe-amd.html
          this.mapModules.WebTiledLayer = WebTiledLayer
          this.loadSwipeLayer({ LayerSwipe })
          // this.swipeLayer = new ArcGISDynamicMapServiceLayer(
          //   'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer'
          // )
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onSwipe(e) {
      if (e.target.checked) {
        var selectedBasemap = this.basemapGallery.getSelected()
        var toggleBasemap
        if (selectedBasemap.id == 'image') {
          toggleBasemap = this.basemapGallery.get('vector')
        } else {
          toggleBasemap = this.basemapGallery.get('image')
        }
        var basemapLayer = toggleBasemap.layers[0]
        this.swipeLayer = new this.mapModules.WebTiledLayer(basemapLayer.templateUrl, {
          fullExtent: basemapLayer.fullExtent,
          subDomains: basemapLayer.subDomains,
          tileInfo: basemapLayer.tileInfo
        })
        this.map.addLayer(this.swipeLayer)
        this.swipeWidget.layers = [this.swipeLayer]
        if (!this.swipeWidget.loaded) {
          this.swipeWidget.startup()
        }
        this.swipeWidget.enable()
      } else {
        this.map.removeLayer(this.swipeLayer)
        this.swipeLayer = null
        this.swipeWidget.disable()
      }
    },
    loadSwipeLayer(mapModules) {
      this.swipeWidget = new mapModules.LayerSwipe(
        {
          type: 'vertical', // Try switching to "scope" or "horizontal"
          map: this.map,
          layers: []
        },
        'swipeDiv'
      )
    }
  }
}
</script>

<style lang="less" scoped>
.setting-drawer-index-content {
  .setting-drawer-index-blockChecbox {
    display: flex;

    .setting-drawer-index-item {
      margin-right: 16px;
      position: relative;
      border-radius: 4px;
      cursor: pointer;

      img {
        width: 48px;
      }

      .setting-drawer-index-selectIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        padding-top: 15px;
        padding-left: 24px;
        height: 100%;
        color: #1890ff;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .setting-drawer-theme-color-colorBlock {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    float: left;
    cursor: pointer;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    color: #fff;
    font-weight: 700;

    i {
      font-size: 14px;
    }
  }
}

.setting-drawer-index-handle {
  position: absolute;
  top: 240px;
  background: #fff;
  width: 24px;
  height: auto;
  display: flex;
  right: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1001;
  text-align: center;
  font-size: 16px;
  border-radius: 4px 0 0 4px;
  flex-direction: column;
  i {
    color: inherit;
    font-size: 20px;
  }
}
.setting-drawer-index-handle.draw-close {
  right: 300px;
  -webkit-transition: -webkit-right 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
  transition: -webkit-right 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
  transition: right 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
  transition: right 0.3s cubic-bezier(0.7, 0.3, 0.1, 1), -webkit-right 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.ant-form-item {
  margin-bottom: 0 !important;
}
/deep/.ant-form-item-control-wrapper .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
  margin: 0 !important;
  padding: 8px 16px;
}
</style>
